<style lang="less" scoped>
@import "@/assets/style/variables.less";

.comment {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: @border-radius;
    box-shadow: @box-shadow;
    padding: @padd;
    position: relative;

    .comment-title {
        color: #585858;
    }

    .block {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
    }
}
</style>
<template>
    <div class="comment">
        <h3 class="comment-title">{{ commentTitle }}</h3>
        <div class="comment-main">
            <MyComment1 @searchComment="searchComment" @modifyComment="modifyComment" @removeComment="removeComment"
                :arr="commentArr" :type="commentTitle" v-if="commentTitle == '随笔评论' || commentTitle == '文章评论'">
            </MyComment1>
            <MyComment2 @searchComment="searchComment" @modifyComment="modifyComment" @removeComment="removeComment"
                :arr="commentArr" :type="commentTitle" v-else></MyComment2>
        </div>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="currentPageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import MyComment1 from '@/components/MyComment1.vue';
import MyComment2 from '@/components/MyComment2.vue';
import {
    itemsArticleComment, itemsNoteComment, listWish, itemsMsg, modifyNoteComment, modifyArticleComment, modifyWish, modifyMsg,
    removeArticleComment, removeNoteComment, removeWish, removeMsg,
    searchArticleComment, searchNoteComment, searchWish, searchMsg
} from '@/api/index';
import { Message } from 'element-ui';
export default {
    components: {
        MyComment1,
        MyComment2
    },
    data() {
        return {
            // 评论标题
            commentTitle: '',
            // 评论的总数
            total: 0,

            // 评论数组
            commentArr: [],
            // 文章
            articlePage_num: 1,
            articlePage_size: 5,
            articleTotal: 0,
            // 随笔
            notePage_num: 1,
            notePage_size: 5,
            noteTotal: 0,

            // 留言
            msgPage_num: 1,
            msgPage_size: 5,
            msgTotal: 0,
            // 祝福
            wishPage_num: 1,
            wishPage_size: 5,
            wishTotal: 0,

            // 修改的新评论
            newComment: '',
            // 修改的id
            modifyId: '',

        }
    },
    computed: {

        // 当前页码
        currentPage() {
            if (this.commentTitle == '文章评论') {
                return this.articlePage_num;
            } else if (this.commentTitle == '随笔评论') {
                return this.notePage_num;
            } else if (this.commentTitle == '弹幕留言') {
                return this.msgPage_num;
            } else if (this.commentTitle == '祝福评论') {
                return this.wishPage_num;
            }
            return 1;
        },
        // 动态计算当前页大小
        currentPageSize() {
            if (this.commentTitle == '文章评论') {
                return this.articlePage_size;
            } else if (this.commentTitle == '随笔评论') {
                return this.notePage_size;
            } else if (this.commentTitle == '弹幕留言') {
                return this.msgPage_size;
            } else if (this.commentTitle == '祝福评论') {
                return this.wishPage_size;
            }
            return 5;
        }
    },
    watch: {

        $route: {
            deep: true,
            immediate: true,
            handler(val) {
                // console.log(val)
                this.getCommentTitle()
                if (this.commentTitle == '文章评论') {
                    this.itemsArticleCommentFn()
                }
                if (this.commentTitle == '随笔评论') {
                    this.itemsNoteCommentFn()
                }
                if (this.commentTitle == '弹幕留言') {
                    this.itemsMsgFn()
                }
                if (this.commentTitle == '祝福评论') {
                    this.listWishFn()
                }
                if (val.query.type) {
                    this.$store.commit('addTab', val)
                }

            }
        },

    },
    methods: {
        // 获取子组件传递的搜索的数据
        async searchComment(data) {
            // console.log(data)
            if (data.keyword.trim() == '') {
                if (this.commentTitle == '文章评论') {
                    this.itemsArticleCommentFn()
                }
                if (this.commentTitle == '随笔评论') {
                    this.itemsNoteCommentFn()
                }
                if (this.commentTitle == '弹幕留言') {
                    this.itemsMsgFn()
                }
                if (this.commentTitle == '祝福评论') {
                    this.listWishFn()
                }
                return
            }
            if (this.commentTitle == '文章评论') {
                await this.searchArticleCommentFn(data.keyword)
            } else if (this.commentTitle == '随笔评论') {
                await this.searchNoteCommentFn(data.keyword);
            } else if (this.commentTitle == '弹幕留言') {
                await this.searchMsgFn(data.keyword);
            } else if (this.commentTitle == '祝福评论') {
                await this.searchWishFn(data.keyword);
            }
        },

        // 搜索文章评论
        async searchArticleCommentFn(keyword) {
            await searchArticleComment({ keyword })
                .then(
                    res => {
                        if (res.code == 200) {
                            this.commentArr = res.result;
                            this.total = res.result.length;
                            Message({
                                showClose: true,
                                message: '搜索成功',
                                type: 'success',
                                offset: 100
                            });
                        } else {
                            Message({
                                showClose: true,
                                message: '暂无搜索结果',
                                type: 'error',
                                offset: 100
                            });
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '暂无搜索结果',
                            type: 'error',
                            offset: 100
                        });
                        console.log(err)
                    }
                )
        },

        // 搜索随笔评论
        async searchNoteCommentFn(keyword) {
            await searchNoteComment({ keyword })
                .then(
                    res => {
                        if (res.code == 200) {
                            this.commentArr = res.result;
                            this.total = res.result.length;
                            Message({
                                showClose: true,
                                message: '搜索成功',
                                type: 'success',
                                offset: 100
                            });
                        } else {
                            Message({
                                showClose: true,
                                message: '暂无搜索结果',
                                type: 'error',
                                offset: 100
                            });
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '暂无搜索结果',
                            type: 'error',
                            offset: 100
                        });
                        console.log(err)
                    }
                )
        },

        // 搜索祝福评论
        async searchWishFn(keyword) {
            await searchWish({ keyword })
                .then(
                    res => {
                        if (res.code == 200) {
                            this.commentArr = res.result;
                            this.total = res.result.length;
                            Message({
                                showClose: true,
                                message: '搜索成功',
                                type: 'success',
                                offset: 100
                            });
                        } else {
                            Message({
                                showClose: true,
                                message: '暂无搜索结果',
                                type: 'error',
                                offset: 100
                            });
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '暂无搜索结果',
                            type: 'error',
                            offset: 100
                        });
                        console.log(err)
                    }
                )
        },

        // 搜索弹幕留言
        async searchMsgFn(keyword) {
            await searchMsg({ keyword })
                .then(
                    res => {
                        if (res.code == 200) {
                            this.commentArr = res.result;
                            this.total = res.result.length;
                            Message({
                                showClose: true,
                                message: '搜索成功',
                                type: 'success',
                                offset: 100
                            });
                        } else {
                            Message({
                                showClose: true,
                                message: '暂无搜索结果',
                                type: 'error',
                                offset: 100
                            });
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '暂无搜索结果',
                            type: 'error',
                            offset: 100
                        });
                        console.log(err)
                    }
                )
        },
        // 获取子组件传递的修改的数据
        async removeComment(data) {
            // console.log(data)
            if (this.commentTitle == '文章评论') {
                await this.removeArticleCommentFn(data.id)
            } else if (this.commentTitle == '随笔评论') {
                await this.removeNoteCommentFn(data.id);
            } else if (this.commentTitle == '弹幕留言') {
                await this.removeMsgFn(data.id);
            } else if (this.commentTitle == '祝福评论') {
                await this.removeWishFn(data.id);
            }
        },
        // 删除文章评论
        async removeArticleCommentFn(id) {
            await removeArticleComment({ id })
                .then(
                    res => {
                        if (res.code == 200) {
                            Message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success',
                                offset: 100
                            })
                            this.itemsArticleCommentFn()
                        } else {
                            Message({
                                showClose: true,
                                message: '删除失败',
                                type: 'error',
                                offset: 100
                            })
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '删除失败',
                            type: 'error',
                            offset: 100
                        })
                        console.log(err)
                    }
                )
        },
        // 删除随笔评论
        async removeNoteCommentFn(id) {
            await removeNoteComment({ id })
                .then(
                    res => {
                        if (res.code == 200) {
                            Message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success',
                                offset: 100
                            })
                            this.itemsNoteCommentFn()
                        } else {
                            Message({
                                showClose: true,
                                message: '删除失败',
                                type: 'error',
                                offset: 100
                            })
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '删除失败',
                            type: 'error',
                            offset: 100
                        })
                        console.log(err)
                    }
                )
        },
        // 删除留言评论
        async removeMsgFn(id) {
            await removeMsg({ id })
                .then(
                    res => {
                        if (res.code == 200) {
                            Message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success',
                                offset: 100
                            })
                            this.itemsMsgFn()
                        } else {
                            Message({
                                showClose: true,
                                message: '删除失败',
                                type: 'error',
                                offset: 100
                            })
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '删除失败',
                            type: 'error',
                            offset: 100
                        })
                        console.log(err)
                    }
                )
        },
        // 删除文章评论
        async removeWishFn(id) {
            await removeWish({ id })
                .then(
                    res => {
                        if (res.code == 200) {
                            Message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success',
                                offset: 100
                            })
                            this.listWishFn()
                        } else {
                            Message({
                                showClose: true,
                                message: '删除失败',
                                type: 'error',
                                offset: 100
                            })
                        }
                    }, err => {
                        Message({
                            showClose: true,
                            message: '删除失败',
                            type: 'error',
                            offset: 100
                        })
                        console.log(err)
                    }
                )
        },

        // 获取子组件传递的修改的数据
        async modifyComment(data) {
            // console.log(data)
            if (this.commentTitle == '文章评论') {
                await this.modifyArticleCommentFn(data.comment, data.id)
            } else if (this.commentTitle == '随笔评论') {
                await this.modifyNoteCommentFn(data.comment, data.id);
            } else if (this.commentTitle == '弹幕留言') {
                await this.modifyMsgFn(data.comment, data.id);
            } else if (this.commentTitle == '祝福评论') {
                await this.modifyWishFn(data.comment, data.id);
            }
        },
        // 修改随笔评论
        async modifyNoteCommentFn(comment, id) {
            await modifyNoteComment({ comment, id }).then(
                res => {
                    // console.log(res)
                    if (res.code == 200) {
                        Message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success',
                            offset: 100
                        })
                        this.itemsNoteCommentFn()
                    } else {
                        Message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error',
                            offset: 100
                        })
                    }
                }, err => {
                    Message({
                        showClose: true,
                        message: '修改失败',
                        type: 'error',
                        offset: 100
                    })
                    console.log(err)
                }
            )

        },

        // 修改文章评论

        async modifyArticleCommentFn(comment, id) {
            await modifyArticleComment({ comment, id }).then(
                res => {
                    // console.log(res)
                    if (res.code == 200) {
                        Message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success',
                            offset: 100
                        })
                        this.itemsArticleCommentFn()
                    } else {
                        Message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error',
                            offset: 100
                        })
                    }
                }, err => {
                    Message({
                        showClose: true,
                        message: '修改失败',
                        type: 'error',
                        offset: 100
                    })
                    console.log(err)
                }
            )

        },

        // 修改祝福评论
        async modifyWishFn(comment, id) {
            await modifyWish({ wish_text: comment, id }).then(
                res => {
                    // console.log(res)
                    if (res.code == 200) {
                        Message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success',
                            offset: 100
                        })
                        this.listWishFn()
                    } else {
                        Message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error',
                            offset: 100
                        })
                    }
                }, err => {
                    Message({
                        showClose: true,
                        message: '修改失败',
                        type: 'error',
                        offset: 100
                    })
                    console.log(err)
                }
            )

        },
        // 修改留言评论
        async modifyMsgFn(comment, id) {
            await modifyMsg({ msg_text: comment, id }).then(
                res => {
                    // console.log(res)
                    if (res.code == 200) {
                        Message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success',
                            offset: 100
                        })
                        this.itemsMsgFn()
                    } else {
                        Message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error',
                            offset: 100
                        })
                    }
                }, err => {
                    Message({
                        showClose: true,
                        message: '修改失败',
                        type: 'error',
                        offset: 100
                    })
                    console.log(err)
                }
            )

        },

        // 分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            if (this.commentTitle == '文章评论') {
                this.articlePage_size = val
                this.itemsArticleCommentFn()
            }
            if (this.commentTitle == '随笔评论') {
                this.notePage_size = val
                this.itemsNoteCommentFn()
            }
            if (this.commentTitle == '弹幕留言') {
                this.msgPage_size = val
                this.itemsMsgFn()
            }
            if (this.commentTitle == '祝福评论') {
                this.wishPage_size = val
                this.listWishFn()
            }
        },
        // 当前的页数
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            if (this.commentTitle == '文章评论') {
                this.articlePage_num = val
                this.itemsArticleCommentFn()
            }
            if (this.commentTitle == '随笔评论') {
                this.notePage_num = val
                this.itemsNoteCommentFn()
            }
            if (this.commentTitle == '弹幕留言') {
                this.msgPage_num = val
                this.itemsMsgFn()
            }
            if (this.commentTitle == '祝福评论') {
                this.wishPage_num = val
                this.listWishFn()
            }
        },
        // 获取评论类型
        getCommentTitle() {
            this.commentTitle = this.$route.query.type
            // console.log(this.commentTitle)
        },

        // 获取文章评论

        async itemsArticleCommentFn() {
            let page_num = this.articlePage_num;
            let page_size = this.articlePage_size;
            await itemsArticleComment({ page_num, page_size })
                .then(
                    res => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.commentArr = res.result.map(item => {
                                item.createAt = this.formatime(item.createAt)
                                return item
                            })
                            // console.log('文章评论', this.commentArr)
                        }
                        this.total = res.total
                    }, err => {
                        console.log(err)
                    }
                )
        },

        // 获取随笔评论
        async itemsNoteCommentFn() {
            let page_num = this.notePage_num;
            let page_size = this.notePage_size;
            await itemsNoteComment({ page_num, page_size })
                .then(
                    res => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.commentArr = res.result.map(item => {
                                item.createAt = this.formatime(item.createAt)
                                return item
                            })
                            this.total = res.total
                            // console.log('随笔评论', this.commentArr)
                        }
                    }, err => {
                        console.log(err)
                    }

                )
        },
        // 获取祝福评论
        async listWishFn() {
            let page_num = this.wishPage_num;
            let page_size = this.wishPage_size;
            await listWish({ page_num, page_size })
                .then(
                    res => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.commentArr = res.result.map(item => {
                                item.createAt = this.formatime(item.createAt)
                                return item
                            })
                            this.total = res.total
                            // console.log('祝福评论', this.commentArr)
                        }
                    }, err => {
                        console.log(err)
                    }

                )
        },
        // 获取留言评论
        async itemsMsgFn() {
            let page_num = this.msgPage_num;
            let page_size = this.msgPage_size;
            await itemsMsg({ page_num, page_size })
                .then(
                    res => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.commentArr = res.result.map(item => {
                                item.createAt = this.formatime(item.createAt)
                                return item
                            })
                            this.total = res.total
                            // console.log('留言评论', this.commentArr)
                        }
                    }, err => {
                        console.log(err)
                    }

                )
        }

    }
}
</script>
